<div
  class="flowscreen"
  [style.min-width.px]="pageWidth + 85"
  data-comment="85 = 16 * 2 + 106 / 2"
  [style.padding-top.px]="isExport ? 40 : 0"
  [style.width]="isExport ? 'calc(100% + 20px)' : 'calc(100% - 1rem)'"
  #flowscreen
>
  <ng-container *ngIf="arrayItemsVisible?.length === 0">
    <h1 style="text-align: center; padding: 8rem; color: #aaa">
      {{ "tabCallFlow.item_was_filtered" | translate }}
    </h1>
  </ng-container>

  <div class="flow-grid-lines" [style.min-width.px]="pageWidth - 16 * 2">
    <div *ngFor="let title of flowGridLines" class="line"></div>
  </div>

  <!-- hosts -->

  <div class="hosts" [style.top.px]="isExport ? 40 : 0">
    <div class="hosts-wrapper">
      <!-- host titles -->
      <ng-template
        ngFor
        let-itemhost
        [ngForOf]="_isCombineByAlias ? hostsCA : hostsIPs"
      >
        <div
          *ngIf="!itemhost.hidden"
          [ngClass]="'item-wrapper' + (isSimplify ? ' big' : '')"
        >
          <!-- wrapper -->

          <div
            class="item"
            [style.border-color]="
              (itemhost.color && itemhost.color.border) || 'lightgray'
            "
          >
            <!-- container -->
            <div
              class="aliasfield"
              (mouseover)="showTooltip(itemhost)"
              (mouseout)="hideTooltip()"
              [ngStyle]="{
                color: itemhost.color ? itemhost.color.font : 'grey',
                background: itemhost.color
                  ? itemhost.color.background
                  : '#fafafa'
              }"
            >
              <ng-template #noAlias>
                <img
                  class="defaultaliasimg"
                  src="./assets/img/gateways/exchange.png"
                />
              </ng-template>
              <div class="alias-img">
                <img
                  *ngIf="itemhost.image; else noAlias"
                  class="aliasimg"
                  [src]="
                    itemhost.isLinkImg
                      ? itemhost.image
                      : './assets/' + itemhost.image
                  "
                  height="35px"
                />
              </div>
              <div class="alias-name">
                {{
                  itemhost.alias && itemhost.alias !== itemhost.ip
                    ? itemhost.alias
                    : ""
                }}
              </div>
            </div>
            <ng-template #ipArray>
              <div
                class="ipfield"
                [ngClass]="{ multiple: itemhost.ip_array.length > 1 }"
                *ngFor="let item of itemhost.ip_array"
                (mouseover)="showTooltip(item.host)"
                (mouseout)="hideTooltip()"
              >
                {{ shortcutIPv6String(item.ip) }}
              </div>
              <div
                class="ipfield dotted"
                [hidden]="itemhost.ip_array.length === 1"
              >
                <span>• • •</span>
              </div>
            </ng-template>
            <div class="ipfield" *ngIf="!itemhost.ip_array; else ipArray">
              {{ shortcutIPv6String(itemhost.ip) }}
            </div>
          </div>
        </div>
      </ng-template>
    </div>
  </div>

  <!-- flow packets -->
  <!-- REAL TIME FLOW -->

  <!-- EXPORT FLOW as PNG -->
  <div
    *ngIf="isExport"
    class="flow-packets-wrapper"
    [style.margin-right.rem]="0"
    [style.min-width.px]="pageWidth + 100"
  >
    <div style="height: 92px"></div>
    <app-flow-item
      *ngFor="let item of arrayItemsVisible; let idx = index"
      [item]="item"
      [idx]="idx"
      [isSimplify]="false"
    >
    </app-flow-item>
    <div style="height: 40px"></div>
  </div>
  <!-- </div> -->
  <div *ngIf="isExport" class="label-callid-container">
    <div
      class="label-callid-wrapper"
      *ngFor="let itemLabel of labels"
      [style.color]="itemLabel.color"
    >
      * {{ itemLabel.callid }}
    </div>
  </div>
</div>
<div class="VS-Container-horizontal">
  <div
    class="VS-Container"
    style="overflow-y: hidden !important"
    (scroll)="onScrollVScrollWrapper($event)"
    *ngIf="!isExport"
    #VScrollWrapper
  >
    <cdk-virtual-scroll-viewport
      class="VS-Container hidescroll"
      (wheel)="cdkWheelScroll($event)"
      (touchstart)="onEvent($event, 'touchstart')"
      (touchmove)="onEvent($event, 'touchmove')"
      [itemSize]="!isSimplify ? 74 : 41"
      [style.min-width.px]="pageWidth + 100"
      #virtualScroll
    >
      <ng-container
        *cdkVirtualFor="let item of virtualScrollerItemsArray; let idx = index"
        [ngSwitch]="item?._step"
      >
        <ng-template ngSwitchCase="top">
          <div style="height: 92px"></div>
        </ng-template>
        <ng-template ngSwitchDefault>
          <app-flow-item
            [item]="item"
            [idx]="idx"
            [isGroupByAlias]="_isCombineByAlias"
            [isSimplify]="isSimplify"
            [isAbsolute]="false"
            (itemClick)="onClickMessage($event.idx, $event.event, item)"
          >
          </app-flow-item>
        </ng-template>
        <ng-template ngSwitchCase="bottom">
          <div style="height: 60px"></div>
        </ng-template>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </div>
</div>

<div
  *ngIf="!isExport"
  class="label-callid-container"
  #labelContainer
  [style.transition.max-height.s]="
    labelWrapper.offsetHeight < 100 / 2 ? 0.5 : 1
  "
  [style.max-height.px]="
    hidden
      ? 0
      : labelWrapper.offsetHeight < flowscreen.offsetHeight / 2
      ? labelWrapper.offsetHeight
      : flowscreen.offsetHeight / 2
  "
>
  <mat-icon
    class="label-callid-pull"
    [style.top.px]="-20"
    (click)="toggleLegend()"
    >expand_{{ hidden ? "less" : "more" }}</mat-icon
  >
  <div
    #labelWrapper
    [style.max-height.px]="flowscreen.offsetHeight / 2"
    style="overflow-y: auto; padding-top: 3px"
  >
    <div
      class="label-callid-wrapper"
      *ngFor="let itemLabel of labels"
      [style.color]="labelColor(itemLabel.callid, itemLabel.selected)"
      [ngClass]="{ selected: itemLabel.copySelected }"
      (click)="onClickLabel(itemLabel.callid)"
      (mousedown)="startCopy()"
      (mouseup)="copy(itemLabel)"
    >
      {{ itemLabel.callid }}
    </div>
  </div>
</div>
<!-- <div *ngIf="!isExport" class="label-callid-container">
    <div class="label-callid-wrapper" *ngFor="let itemLabel of labels"
    [style.color]="'#fff'"
    [style.background-color]="labelColor(itemLabel.callid, itemLabel.selected)"
    [ngClass]="{'selected': itemLabel.copySelected}"
    (click)="onClickLabel(itemLabel.callid)"
    (mousedown)='startCopy()' (mouseup)='copy(itemLabel)'
    > {{ itemLabel.callid }} </div>
</div> -->
<div id="download" style="display: none">
  <img #canvas />
  <a #downloadLink></a>
</div>
<!-- <div class="virtual-scrollbar" *ngIf="!isExport" (mousedown)="setScrollTarget('virtualScrollbar')"
    (scroll)="onScroll($event)" #virtualScrollbar>
    <div [style.transform]="getVirtualScrollHeight" [style.padding.px]="1"></div>
</div> -->
<div
  class="virtual-scrollbar"
  *ngIf="!isExport"
  (mousedown)="setScrollTarget('virtualScrollbar')"
  (scroll)="setVirtualScrollHeight($event)"
  #virtualScrollbar
>
  <div [style.transform]="getVirtualScrollHeight" [style.padding.px]="1"></div>
</div>
